<!--  -->
<template>
    <div class="message">
        <Nav title="消息">
            <template v-slot:left>
                <span class="back" @click="$router.back()"></span>
            </template>
        </Nav>
        <div class="message_con">
            <Scroll
                :preventDefault="true"
                :click="true"
                :tap="true"
                :pullup="true"
                :pulldown="true"
                @scrollToEnd="scrollToEnd"
                :data.sync="msgList"
                ref="myScroll"
            >
                <div>
                    <template v-for="(item,index) in msgList">
                    <router-link tag="div" :to="{name:'activities',params:{id:item.article_id}}" class="message_con_item show_public" :key="index">
                      <img class="img" :src="item.image" />
                      <div class="bottom">
                        <div class="f-15">{{item.summary}}</div>
                        <div class="flex aligin-center justify-between mt-8">
                          <span class="f-15 color-gray mr-auto">{{item.create_time}}</span>
                          <span class="arrow-right"></span>
                        </div>
                      </div>
                    </router-link>
                    </template>
                    <div class="loading-bottom mt-10 f-14" v-if="loading">加载中...</div>
                     <div class="loading-bottom flex color-gray justify-center aligin-center mt-47 f-14" v-if="noMore">
                        <span class="divline mr-10"></span> 没有更多了<span class="divline ml-10"></span>
                      </div>
                </div>  
            </Scroll>
        </div>  
    </div>
</template>

<script>
import Nav from "../../components/Nav";
import Scroll from "../../components/Scroll";
import Page from "../../mixin/page";
import {article} from "../../api/api"
export default {
  mixins: [Page],
  components: { Nav, Scroll },
  data() {
    return {
      msgList: []
    };
  },
  computed: {},
  watch: {},
  methods: {
      shank(index){
          this.$set(this.msgList[index],"isShrink",!this.msgList[index].isShrink)
      },
      _api(){
         article({page:this.current_page+1}).then(({data:{result}})=>{
            if (result &&result.length != 0) {
                  this.msgList = [...this.msgList, ...result];
                  this.current_page += 1;
                  this.last_page = this.current_page + 1;
                } else {
                  this.last_page = this.current_page;
                }
                this.loading = false;
        })
      }
  },
  created() {},
  mounted() {
    this._api()
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../../assets/style/mixin.less");
//@import url(); 引入公共css类
.message /deep/ .cubeic-select{
    transition: all .3s ease;
}
.flex-1{
  flex: 1;
}
.mt-47{
  margin-top: 47px;
}
.divline{
    width: 43px;
    height: 0;
    border-top: 1px dashed #ccc;

}
.message {
  height: 100%;
}
.message_con {
  height: calc(100% - 45px);
  overflow: hidden;
}
.loading-bottom {
  width: 100%;
  text-align: center;
}
.select_top {
  transform: rotate(-90deg);
}
.message_item_title {
}
.message_item_title_left em {
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #ea373f;
}
.message_item_con {
}
.message_con img{
  height: 82px;
  width: 82px;
}
.message_item_con span {
  color: #c1c1c1;
  line-height: 18px;
}
.rotate-180{
    transform: rotate(180deg);
}
.message_con_item {
  margin: 0 13px 10px;
  .img{
    width: 100%;
    height: 120px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .bottom{
    padding: 14px 16px 13px 10px;
  }
  .arrow-right{
    margin-bottom: 4px;
    display: inline-block;
    width: 8px;
    height: 17px;
    background: url("../../assets/imgs/arrow-right.png");
    background-size: 100% 100%;
  }
  .bardge{
    margin-right: 12px;
    font-size: 12px;
    color: #fff;
    height: 20px;
    width: 44px;
    border-radius: 5px;
    background: #ccc;
  }
 
}
 .divline{
    width: 43px;
    height: 0;
    border-top: 1px dashed #ccc;

  }
</style>